import React, {useEffect, useState} from "react";
import metadata from "./icon.json"
import {util} from "@/common/util";
import HStaticSelect, {HStaticSelectProps, SelectDataArray} from "@/components/ant-ext/HStaticSelect";
import {Space} from "antd";

const ICON: SelectDataArray = []
for (let i in metadata) {
    ICON.push({title: <div key={i}>{util.LazyIcon(metadata[i])}</div>, value: metadata[i]})

}
export default function IconSelect(props: HStaticSelectProps) {
    const [iconList, setIconList] = useState<SelectDataArray>([])
    const [open, setOpen] = useState<boolean>(false)

    useEffect(() => {
        setIconList(ICON)
    }, [])

    return <>
        <HStaticSelect
            {...props}
            allowClear
            style={{width: "100%"}}
            dataSource={[]}
            open={open}
            showSearch={true}

            onSearch={(value) => {
                if (value === "") {
                    setIconList(ICON)
                } else {
                    setIconList(ICON.filter(p => String(p.value).toLowerCase().indexOf(value.toLowerCase()) !== -1))
                }
            }}
            onDropdownVisibleChange={(open) => setOpen(open)}
            dropdownRender={(menu: React.ReactElement) => {
                let span = iconList.map((p, i) => {
                    return <span key={i} style={{cursor: "pointer"}} onClick={() => {
                        setOpen(false)
                        // @ts-ignore
                        props?.onChange(p.value)

                    }}> {p.title}</span>
                })
                return <>
                    <Space style={{maxHeight: "200px", overflowY: "auto"}} size={"large"}
                           wrap={true}>{span}</Space>

                </>
            }}
        />
    </>
}